<script setup name="ProdOutputValue">
import prodOutputValue1 from './modules/prodOutputValue1.vue'
import prodOutputValue2 from './modules/prodOutputValue2.vue'
import prodOutputValue3 from './modules/prodOutputValue3.vue'
import prodOutputValue4 from './modules/prodOutputValue4.vue'
import prodOutputValue5 from './modules/prodOutputValue5.vue'
</script>

<template>
  <div class="ps_board prodOutputValue">
    <ps-header :showDecoration5="false" />
    <div class="pannel">
      <div class="pannel-item one">
        <prodOutputValue1 />
      </div>
      <div class="pannel-item two">
        <prodOutputValue2 />
      </div>
      <div class="pannel-item three">
        <prodOutputValue3 />
      </div>
      <div class="pannel-item four">
        <prodOutputValue4 />
      </div>
      <div class="pannel-item five">
        <prodOutputValue5 />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.prodOutputValue {
  display: flex;
  flex-direction: column;
}

.pannel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 2px;
  flex: 1;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  &-item {
    // border: 1px solid #fff;
  }

  .one {
    grid-column: span 2;
    grid-row: span 2;
  }

  .two {
    grid-column: span 1;
    grid-row: span 2;
  }

  .three {
    // grid-column: span 3;
  }
}
</style>
